<template>
    <basic-container>
        <el-tabs v-model="tabActiveId" @tab-click="handleClick">
            <el-tab-pane :label="item.title" :id="item.id" :name="item.title" v-for="(item, index) in list" :key="item.id" disabled>
            </el-tab-pane>
<!--            <el-tab-pane label="H5列表页" name="h5list">-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="PC首页" name="pchome">-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="PC列表页" name="pclist">-->
<!--            </el-tab-pane>-->
        </el-tabs>
        <div v-if="tabActiveId == item.id"  v-for="(item, index) in list" :key="index">
            <div  class="phone">
                <div class="mask"></div>
                <div class="rect"></div>
                <div class="frame-wrapper">
                    <iframe :src="$config.pageCofig.previewUrl + '/pageA/store/storeHome?storeId=' + item.storeId" frameborder="0" scrolling="yes" class="frame" style="width: 392px; height: 776px; transform: scale(0.698667);"></iframe>
                </div>
                <div class="page-set">
                    <el-button type="primary" icon="el-icon-edit" @click="toDesign(item)">设计</el-button>
                </div>
            </div>


        </div>

    </basic-container>
</template>

<script>
    import {
        getList,
        update,
        getDetail,
    } from "@/api/cms/seller/pageInfo";

    export default {
        data() {
            return {
                list:[],
                tabActiveId:"",
            }
        },
        created() {
            this.init();
        },
        methods:{
            init(){
                getList().then(res => {
                    this.list = res.data.data;
                    if(this.list.length>0){
                        this.tabActiveId = this.list[0].id;
                    }
                });
            },
            toDesign(item) {
                this.$router.push({
                    path: `/page/store/editor?id=${item.id}&storeId=${item.storeId}`,
                })
            },
            handleClick(tab) {
                //tab页切换
                // this.tabActiveId = tab.id;
				return false;
				
            },

        },

    }
</script>

<style>
    .mask{
        position: absolute;
        box-sizing: border-box;
        padding: 42px 16px 0;
        width: 295px;
        height: 600px;
        /*background-color: #FFFFFF;*/
        z-index: 99999;
        /*box-shadow: 0 0 28px 0 rgba(0,22,46,.14);*/
        /*border-radius: 32px;*/
    }
    .phone {
        position: relative;
        box-sizing: border-box;
        padding: 42px 16px 0;
        width: 295px;
        height: 600px;
        background-color: #fff;
        box-shadow: 0 0 28px 0 rgba(0,22,46,.14);
        border-radius: 32px;
        /*overflow: hidden;*/
    }

    .page-set{
        position: absolute;
        top: 24px;
        right: -100px;
    }
    .phone .rect {
        position: absolute;
        top: 24px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 59px;
        height: 6px;
        background-color: #d8d8d8;
        border-radius: 3px;
    }
    .phone .frame-wrapper {
        width: 262px;
        height: 542px;
        border: 1px solid #e7e7e7;
        border-radius: 12px;
        overflow: hidden;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    .phone .frame{
        width: 375px;
        height: 774px;
        -webkit-transform: scale(.7);
        transform: scale(.7);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
	.el-tabs__item.is-disabled {
		color: #F39800;
		cursor:default
	  }
	
</style>
